<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>数据统计</title>
    <link href="../lib/AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css"/>
    <link href="../lib/AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css"/>

    <link href="../home/css/personal.css" rel="stylesheet" type="text/css">
    <link href="../home/css/infstyle.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="../lib/jquery/jquery.min.js"></script>
    <script src="../lib/AmazeUI-2.4.2/assets/js/amazeui.js" type="text/javascript"></script>
    <script src="../lib/vue/2.4.2/vue.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../lib/elementui/1.4.3/theme-default/index.css">
    <script src="../home/js/vue.min.js"></script>
    <script src="../lib/elementui/1.4.3/index.js"></script>
    <script src="../home/js/echarts.js"></script>

</head>
<body>

<div id="statisticalChart">
    <!--条件区域-->
    <div style="margin-top: 20px">
        <el-row >
            <el-col :span="2" :offset="1">
                <h3 style="line-height: 2.5">时间范围：</h3>
            </el-col>
            <el-col :span="6">
                <template>
                    <div class="block">
                        <el-date-picker v-model="TimeRange" type="daterange" range-separator="-"
                                        start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                    </div>

                </template>
            </el-col>
            <el-col :span="3" v-if="type==1">
                <h3 style="line-height: 2.5">选择采购单位：</h3>
            </el-col>
            <el-col :span="3" v-if="type==0">
                <h3 style="line-height: 2.5">选择商家：</h3>
            </el-col>
            <el-col :span="3" v-if="type==2">
                <h3 style="line-height: 2.5">选择商品类型：</h3>
            </el-col>
            <el-col :span="3" v-if="type==3">
                <h3 style="line-height: 2.5">选择商品类型：</h3>
            </el-col>
            <el-col :span="3">
                <template>
                    <el-select v-model="userId" multiple placeholder="请选择" style="width: 200px;height: 36px;display: inline-table;">
                        <el-option v-for="item in options"  :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </el-col>
            <el-col :span="2" :offset="3">
                <el-button type="primary" v-on:click="create">生成图表</el-button>
            </el-col>
            <el-col :span="2"  :offset="1">
                <el-button type="primary" v-on:click="downLoadExcel">数据导出</el-button>
            </el-col>
        </el-row>

    </div>


    <div id="main" style="width: 70%;height:500px; margin-top: 30px;"></div>
    <div id="mainPie" style="width: 70%;height:500px; margin-top: 20px;"></div>
</div>

<script src="../charge/statisticalChart.js"></script>
</body>

</html>